@import "../node_modules/bootstrap/scss/bootstrap";
@import "./pytch-variables.scss";

////////////////////////////////////////////////////////////////////////

$panel-background: $main-bg-color;

$focused-item-background-glow: lighten($primary, 25);

$ide-gap: 0px;

////////////////////////////////////////////////////////////////////////

// Background colours for the various "cards": actor, appearance, sound.
$stage-card-background: $pytch-colour-accent-blue;
$sprite-card-background: $pytch-colour-main-blue;

////////////////////////////////////////////////////////////////////////

@mixin min-dimens-zero() {
  min-width: 0;
  min-height: 0;
}

@mixin grid-hstack-two($left, $right) {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: $left $right;
  column-gap: $ide-gap;
}

@mixin grid-hstack-three($left, $middle, $right) {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: $left $middle $right;
  column-gap: $ide-gap;
}

@mixin grid-hstack-four($c0, $c1, $c2, $c3) {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: $c0 $c1 $c2 $c3;
  column-gap: $ide-gap;
}

@mixin grid-vstack-two($top, $bottom) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: $top $bottom;
  row-gap: $ide-gap;
}
